<template>
  <el-tabs
    v-model="activeName"
    type="border-card"
    @tab-click="handleClick"
  >
    <el-tab-pane
      name="first"
      label="校外体育行为"
    >
      <div v-if="this.activeName === 'first'">
        <sport-cloud-job />
      </div>
    </el-tab-pane>
    <el-tab-pane
      name="second"
      label="校内体育行为"
    >
      <div v-if="this.activeName === 'second'">
        <sport-cloud-job-1 />
      </div>
    </el-tab-pane>
    <el-tab-pane
      name="third"
      label="体育测试"
    >
      <div v-if="this.activeName === 'third'">
        <sport-cloud-job-2 />
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import sportCloudJob from './sportCloudJob.vue'
import SportCloudJob1 from './sportCloudJob1.vue'
import SportCloudJob2 from './sportCloudJob2.vue'
export default {
  components: { sportCloudJob, SportCloudJob1, SportCloudJob2 },
  data() {
    return {
      activeName: 'first',
    }
  },
  computed: {
    documentClientHeight: {
      get () { return this.$store.state.common.documentClientHeight },
      set (val) { this.$store.commit('common/updateDocumentClientHeight', val) }
    },
  },
  created() {
  },
  mounted () {
    this.resetDocumentClientHeight()
    this.resetDocumentClientWidth()
    window.addEventListener('scroll', this.onScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.onScroll)
  },
  updated () {
    this.$nextTick(() => {
      this.$refs['table'].doLayout()
    })
  },
  methods: {
    onScroll() {
      this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    },
    // 重置窗口可视高度
    resetDocumentClientHeight () {
      this.documentClientHeight = document.documentElement['clientHeight']
      window.onresize = () => {
        this.documentClientHeight = document.documentElement['clientHeight']
      }
    },
    // 重置窗口可视宽度
    resetDocumentClientWidth () {
      this.documentClientWidth = document.documentElement['clientWidth']
      window.onresize = () => {
        this.documentClientWidth = document.documentElement['clientWidth']
      }
    }
  }
}
</script>
<style src="@/assets/scss/stu.scss" lang="scss" scoped></style>
